import React from 'react';
const ListGroup = ({
  items,
  valueProperty,
  textProperty,
  onItemSelect,
  selectedItem,
}) => {
  /**
   * 使用父组件传过来的属性
   * @param {valueProperty} 动态id
   * @param {textProperty}  动态内容
   */
  return (
    <ul className="list-group">
      {items.map((item) => (
        <li
          onClick={() => onItemSelect(item)}
          key={item[valueProperty] || ''}
          className={
            item === selectedItem ? 'list-group-item active' : 'list-group-item'
          }
        >
          {item[textProperty]}
        </li>
      ))}
    </ul>
  );
};
/**
 * Props的默认值
 */
ListGroup.defaultProps = {
  textProperty: 'name',
  valueProperty: '_id',
};
export default ListGroup;
